<template>
    <div class="main">
        <div class="main-header" v-if="buttons.length">
			<!-- <elUploadFile style="margin-right: 10px;"  :title="'导入'" :auto-upload="false" :upload-clear="true"
				:show-file-list="false" @change="upload" :limit="1" :multiple="false" accept=".xls,.xlsx" class="ml-10">
				<el-button type="primary">导入</el-button>
			</elUploadFile> -->
            <el-button v-for="(item, index) in buttons" :key="index" :type="item.path | formatType" :icon="item.icon"
                :disabled="item.path | formatDisabled(selection)" @click="tapButton(item)">{{ item.title }}</el-button>
        </div>
        <el-table ref="table" class="main-table" row-key="id" :data="goodsTypeData" height="100%" border
        :tree-props="{children: 'children', hasChildren: 'hasChildren'}" default-expand-all
            header-cell-class-name="main-table-header" @selection-change="onSelectionChange" @row-click="onRowClick">
            <el-table-column type="selection" width="50"> </el-table-column>
            <!-- <el-table-column prop="sort" align="center" label="序号"></el-table-column> -->
            <el-table-column prop="name" align="center" label="分类名称"></el-table-column>
            <el-table-column prop="url" align="center" label="分类图标">
                <template slot-scope="{ row }">
                    <el-image style="width:50px;height:50px;" fit="contain" :src="row.url"
                        :preview-src-list="[row.url]"></el-image>
                </template>
            </el-table-column>
            <el-table-column align="center" label="启用状态" prop="status">
                <template slot-scope="{ row }">
                    <el-switch :value="row.status" :active-value="1" :inactive-value="0"></el-switch>
                </template>
            </el-table-column>
        </el-table>
        <el-pagination class="main-pagination" :current-page.sync="page" :page-size="limit" :total="total"
            @current-change="onPageChange" layout="total,jumper,prev,pager,next"></el-pagination>
        <el-dialog :visible.sync="dialogVisible" :title="dialogTitle" append-to-body width="960px" @close="onDialogClose">
            <component :cateList="goodsTypeData" :is="dialogView" @update="getGoodsTypeData" :selection="selection">
            </component>
        </el-dialog>
    </div>
</template>

<script>
import { get, del } from "@/assets/js/http.js";
import elUploadFile from '@/components/el-upload-file.vue';

export default {
    name: "view-article-type",
    data() {
        return {
            goodsTypeData: [],
            page: 1,
            limit: 999,
            total: 0,
            selection: [],
            dialogVisible: false,
            dialogTitle: "",
            dialogView: "",
            info: {},//编辑详情
        }
    },

    mounted() {
        this.getGoodsTypeData();
    },
    components: {
        Add: () => import("./add.vue"),
        Edit: () => import("./edit.vue"),elUploadFile
    },
    computed: {
        buttons() {
            return this.$store.state.buttons;
        }
    },
    methods: {
        onPageChange(index) {
            this.page = index;
            this.getGoodsTypeData();
        },
        async getGoodsTypeData() {
            const data = await get({
                url: "/admin/store.MerchantCate/index",
                loading: true,
                params: {
                    page: this.page,
                    limit: this.limit
                }
            });
            data.list.forEach((item) => {
                let findParent = data.list.find(i => i.id == item.parent_id)
                if (findParent) {
                    findParent.children = [...(findParent.children || []), item]
                }
            })
            data.list = data.list.filter(item => item.parent_id == 0)
            this.$nextTick(() => {
                this.goodsTypeData = data.list;
                this.total = data.total;
            })
        },
        onAdd() {
            this.dialogTitle = "新增商家商品分类";
            this.dialogView = "Add";
            this.dialogVisible = true;
        },
        onEdit() {
            this.dialogTitle = "编辑商家商品分类";
            this.dialogView = "Edit";
            this.dialogVisible = true;
        },
        onDelete() {
            this.$confirm(
                `此操作将永久删除该${this.selection.length}个商家商品分类, 是否继续?`,
                "提示",
                {
                    confirmButtonText: "确定",
                    cancelButtonText: "取消",
                    type: "warning"
                }
            )
                .then(async () => {
                    let query = "?";
                    for (let i = 0; i < this.selection.length; i++) {
                        const item = this.selection[i];
                        if (i > 0) {
                            query += "&ids[]=" + item.id;
                        } else {
                            query += "ids[]=" + item.id;
                        }
                    }
                    await del({
                        url: "/admin/store.MerchantCate/del" + query,
                        successTip: true,
                        loading: true
                    });
                    this.getGoodsTypeData();
                })
                .catch(() => {
                    this.$refs.table.clearSelection();
                });
        },
        onSelectionChange(selection) {
            this.selection = selection;
        },
        onRowClick(row) {
            this.$refs.table.toggleRowSelection(row);
        },
        onDialogClose() {
            this.$refs.table.clearSelection();
        },
		
        tapButton(item) {
            if (item.path === "add") {
                this.onAdd();
            } else if (item.path === "edit") {
                this.onEdit();
            } else if (item.path === "delete") {
                this.onDelete();
            }
        }
    }
};
</script>